<template>
  <!--合同中心-->

  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">我的合同
        </span>
          <el-button type="primary" class="t-1">
            添加合同<el-icon class="el-icon--right"><Upload /></el-icon>
          </el-button>

        </div></el-col>
      </el-row>

      <el-row>
        <el-col>

          <div class="aaa">

            <div class="tj"><span>合同名称:</span><input class="tbScenAipt" placeholder=""></div>
            <div class="tj"><span>合同编号:</span><input class="tbScenAipt" placeholder=""></div>


            <div class="tbScenCdiv">
              <span>合同状态:
              <el-select class="tbScenBipt" placeholder="请选择">
                <el-option label="履行中" value="履行中" />
                <el-option label="完成" value="完成" />
                <el-option label="暂停" value="暂停" />
                <el-option label="终止" value="终止" />
                <el-option label="解除" value="解除" />
                 <el-option label="未激活" value="未激活" />
              </el-select></span>
            </div>




            <div class="tbScenDdiv">
              <el-button class="tbFirstBu" @click="hidddiv=!hidddiv">高级搜索</el-button>
            </div>
          </div>

          <div class="tbhide">
            <div class="tjj-1">
              <el-row>
                <el-col>
                  <div class="tbTirDiv">
                    <div class="tbTirCdiv" style="background: white;"><p>合同总数</p><p>25</p>
                      <span class="card-icon  icon-mode-app-wancheng" style="position: absolute; right: 0px;"></span>
                    </div>
                    <div class="tbTirCdiv" style="background: white;"><p>合同总金额</p><p>77381.59，</p></div>
                    <div class="tbTirCdiv" style="background: white;"><p>履行中金额</p><p>77381.59，</p></div>
                    <div class="tbTirCdiv" style="background: white;"><p>暂停合同总金额</p><p>77381.59，</p></div>
                    <div class="tbTirCdiv" style="background: white;"><p>解除合同总金额</p><p>77381.59，</p></div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="tbScenDiva" v-if="hidddiv">

              <div style="border-bottom:1px solid gainsboro;height: 40px"><span style="font-size: 10px;margin-left:30px;line-height: 40px">查询条件</span></div>

              <div style="font-size: 10px;">

                <div style="display: flex; justify-content: space-around;height: 60px">
                  <div><span style="margin-left: 0px">报销日期：</span>    <input style="height: 30px;width: 300px;"/></div>
                  <div><span style="margin-left: 2px">报销金额：</span>    <input style="height: 30px;width: 300px;"/></div>
                </div>

                <div style="display: flex; justify-content: space-around;height: 60px">
                  <div><span>报销编号：</span>    <input style="height:30px;width: 300px"/></div>
                  <div><span>报销人员：</span>    <input style="height: 30px;width: 300px"/></div>
                </div>




              </div>
              <div style="border-top: 1px solid gainsboro;height: 50px">
                <el-button type="primary" style="margin-left: 630px;margin-top: 10px">搜索</el-button>
                <el-button style="margin-left:10px;margin-top: 10px">重置</el-button>
                <el-button style="margin-left:10px;margin-top: 10px" @click="hidddiv=false">取消</el-button>
              </div>
            </div>
          </div>


        </el-col>
      </el-row>











      <el-tabs type="border-card" class="demo-tabs">

        <el-tab-pane label="全部" >
          <div class="picture" data-v-309cad06="">

            <div class="typeface" data-v-309cad06="">
              <el-row>
                <el-col>
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="booksId" type="selection" width="60"/>
                    <el-table-column prop="name" label="序号" width="100" />
                    <el-table-column prop="sex" label="员工姓名" width="100" />
                    <el-table-column prop="address" label="签署姓名" width="100" />
                    <el-table-column prop="where" label="岗位" width="100" />
                    <el-table-column prop="steta" label="所属部门" width="100" />
                    <el-table-column prop="timet" label="联系方式" width="180" />
                    <el-table-column prop="ddzt" label="订单状态" width="180" />
                    <el-table-column prop="ddzt" label="合同开始日期" width="180" />
                    <el-table-column prop="ddzt" label="合同结束日期" width="180" />
                  </el-table>
                </el-col>
              </el-row>
            </div></div>

        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, toRefs} from "vue";


const hidddiv=ref(false)
const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
});
const tableData = [
  {
    name: ' 1',
    steta:'-',
    sex:'陈大',
    where:'后勤主管',
    address: '丞十三',
    timet:'1011',
    ddzt:'审批中',
  },
  {
    name: ' 2',
    steta:'-',
    sex:'陈二',
    where:'行政主管',
    address: '丞十三',
    timet:'2012',
    ddzt:'审批中',
  },
  {
    name: ' 3',
    steta:'-',
    sex:'陈三',
    where:'销售主管',
    address: '丞十三',
    timet:'1008',
    ddzt:'审批中',
  },
  {
    name: ' 4',
    steta:'-',
    sex:'陈四',
    where:'人事主管',
    address: '丞十三',
    timet:'2028',
    ddzt:'审批中',
  },

  {
    name: ' 5',
    steta:'-',
    sex:'陈五',
    where:'成本主管',
    address: '丞十三',
    timet:'2008',
    ddzt:'审批中',
  }
]
const {total,pageNo,pageSize} = toRefs(d);
</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 2px solid gainsboro;
  border-bottom: 1px solid gainsboro;

  position: relative;
}

.tbTirDiv{
  float: left;
}
.t-1{
position: relative;
left: 860px;
  width: 100px;
  height: 30px;
}
.tjj-1{
  display: flex;
}
.tbScenCdiv{
  /*position: relative;*/
  /*left: 400px;*/
  /*top: -69px;*/
  font-size: 20px;
  margin: 10px 10px;
  /*width: 400px;*/
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbScenBipt{
  width:100px;

}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.aaa{
  display:flex;
}

.tj{
  display:flex;
  margin: 5px 10px;
  font-size: 20px;
}

.tjj{
  margin:10px 20px;
}

.tbScenAipt{
  width: 150px;
  height: 30px;
  border: 1px solid black;
}

.tbTirCdiv{

  border: 1px solid gainsboro;
  width: 256px;
  float: left;
  text-align: center;

}
.tbScenDdiv{
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}
.tbFirstBu{
  height: 30px;
  /*margin-left: 100px;*/
  margin-top: 10px;
}

</style>